<template>
	<view>
		<view class="bgbox">
			<view class="userbox">
				<image :src="avatarUrl || '../../../static/user/touxiang.png'" class="userimg" @click="upImg"></image>
				<!-- <view class="username">用户姓名</view> -->
			</view>
		</view>
		<view class="box">
			<view class="item">
				<view class="title">手机号</view><input type="number" placeholder="输入手机号" class="input" :disabled="true" v-model="phone" />
			</view>
			<view class="item">
				<view class="title">昵 称</view><input type="text" placeholder="输入昵称" class="input" v-model="name" />
			</view>
			<view class="item">
				<view class="title">性 别</view>
				<view class="sexbox">
					<view class="s-box">
						<view class="xz" @click="sex(0)">
							<image src="../../../static/r-icon/r7.png" class="img" v-if="gender==0" mode="aspectFill"></image>
						</view>
						<text>未知</text>
					</view>
					<view class="s-box">
						<view class="xz" @click="sex(1)">
							<image src="../../../static/r-icon/r7.png" class="img" v-if="gender==1" mode="aspectFill"></image>
						</view>
						<text>男</text>
					</view>
					<view class="s-box">
						<view class="xz" @click="sex(2)">
							<image src="../../../static/r-icon/r7.png" class="img" v-if="gender==2" mode="aspectFill"></image>
						</view>
						<text>女</text>
					</view>
				</view>
			</view>
			<!-- <view class="item">
				<view class="title">生  日</view>
				<picker mode="date" @change="bindDateChange">
				    <view  class="input">{{date}}</view>
				</picker>
			</view> -->
			<!-- <view class="item">
				<view class="title">微  信</view><input type="text" placeholder="请输入您的微信号" class="input"/>
			</view>
			<view class="item">
				<view class="title">邮  箱</view><input type="text" placeholder="请输入您的邮箱" class="input"/>
			</view> -->
			<view class="btn" @click="ok">
				修改资料
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setuserinfo,
		getuser
	} from "../../../api/login.js"
	import http from "@/utils/http.js"
	export default {
		data() {
			return {
				date: "请选择日期",
				name: "",
				gender: 0,
				avatarUrl: '',
				phone: ""
			}
		},
		onLoad() {
			this.getinfo()
		},
		onShow() {
			console.log(http.uploadFiles)
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatarUrl = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: http.uploadFiles,
					filePath: path,
					name: 'headImage',
					formData: {},
					header: {
						'Authorization': "Bearer " + uni.getStorageSync("userInfo").token,
						"userId": uni.getStorageSync("userInfo").userId
					},
					success: (res) => {
						console.log("服务器图片地址", JSON.parse(res.data).data)
						this.avatarUrl = JSON.parse(res.data).data;
					},
					fail: (err) => {},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 250);
					}
				});
				uni.$off('uAvatarCropper')
			})
		},
		methods: {
			bindDateChange(e) {
				this.date = e.detail.value
				console.log(e)
			},
			// 上传头像
			upImg() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			// 选择性别
			sex(e) {
				this.gender = e
			},
			// 保存资料
			async ok() {
				let res = await this.post(setuserinfo, {
					realname: this.name,
					gender: this.gender,
					avatarUrl: this.avatarUrl
				})
				let data = uni.getStorageSync("userInfo")
				data.avatarUrl = res.data.avatarUrl
				data.nickName = res.data.nickName
				uni.setStorageSync("userInfo", data)
				this.msg('保存成功')
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			},
			async getinfo() {
				let res = await this.get(getuser)
				this.avatarUrl = res.data.avatarUrl
				this.phone = res.data.phone
				this.name = res.data.nickName
				this.gender = res.data.gender
			}


		}
	}
</script>

<style>
	.userbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.username {
		height: 56rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;

	}

	.userimg {
		width: 130rpx;
		height: 130rpx;
		border-radius: 130rpx;
		margin-bottom: 40rpx;
	}

	.btn {
		width: 610rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%);
		opacity: 1;
		border-radius: 62rpx;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.input {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;

	}

	.xz {
		margin-right: 10rpx;
		border-radius: 50%;
		width: 44rpx;
		height: 44rpx;
		background-color: #fff;
		/* border: 1px #999 solid; */
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.title {
		width: 160rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		opacity: 1;

	}

	.s-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;

	}

	.img {
		width: 44rpx;
		height: 44rpx;
		border-radius: 22rpx;
		display: block;
	}

	.sexbox {
		display: flex;
	}

	.item {
		display: flex;
		align-items: center;
		height: 58rpx;
		background: #F6F6F6;
		margin-bottom: 38rpx;
		padding-left: 20rpx;
	}

	.box {
		width: 690rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 12rpx;
		margin-left: 30rpx;
		padding: 50rpx 30rpx;
		margin-top: 20rpx;
	}

	page {
		background: #F6F6F6;
	}

	.bgbox {
		width: 750rpx;
		height: 240rpx;
		background: #F3C44E;
		opacity: 1;
	}
</style>
